<template>
  <view class="container">
    <view class="build-info">
      <view class="address-name"> <text selectable>{{ fJlxxqmc }}</text></view>
      <view class="collected-house">
        已采集标准地址: <text>{{ collected }}个</text>
      </view>
      <view class="uncollected-house collected-house">
        未采标准地址: <text>{{ notCollected }}个</text>
      </view>

      <image class="house-icon" :src="baseImgUrl + 'shiyoufangwu3.png'"></image>
    </view>

    <view class="list-content">
      <!--     <view class="tabs-wrap">
        <view class="tabs" @click="tabClick(0)" :class="{ 'tab-active': type === 0 }">
          全部房屋
        </view>
        <view class="tabs" @click="tabClick(1)" :class="{ 'tab-active': type === 1 }">
          已采集
        </view>
        <view class="tabs" @click="tabClick(2)" :class="{ 'tab-active': type === 2 }">
          待采集
        </view>
      </view> -->

      <view class="search-wrap">
        <u--input placeholder="请输入关键词搜索" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
          shape="circle" v-model="likeName" @change="input_change"></u--input>
      </view>

      <view class="list-container">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" @scroll="scrollHeight"
          :style="{ height: !loading && !noMore ? '100%' : '100%' }" v-if="dataSource.length">
          <view class="list-item" v-for="item in dataSource"
            :class="{ 'list-item-active': item.syfwCount === 0, 'list-item-logout': item.fZxbs === '1' }">
            <image v-if="item.fZxbs === '1'" :src="baseImgUrl + 'logout-icon-list.png'"></image>
            <image v-else-if="item.syfwCount == 1" :src="baseImgUrl + 'shiyoufangwu6.png'"></image>
            <image v-else :src="baseImgUrl + 'shiyoufangwu7.png'"></image>
            <text class="context">{{ item.roomName }}</text>
            <text v-if="item.fZxbs === '1'" class="btn-text" @click="navigatorTo" :data-params="{
              ...item,
              fDzbm, 
              fJlxxqmc
            }" :data-url="`/actual_real_estate/real_estate_detail`">已注销</text>
            <text class="btn-text" v-else-if="item.syfwCount == 1" @click="navigatorTo" :data-params="{
              ...item,
              fDzbm, 
              fJlxxqmc
            }" :data-url="`/actual_real_estate/real_estate_detail`">去查看</text>
            <text v-else class="btn-text" @click="handleClickRouter" :data-url="`/actual_real_estate/real_estate_add?type=perfect&item=${JSON.stringify(
                { ...item, fDzbm, fJlxxqmc }
              )}`">去完善</text>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>

        <view v-if="!dataSource.length">
          <u-empty mode="list" text="暂无内容！" :icon="baseImgUrl + 'no-icon2.png'">
          </u-empty>
        </view>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    getAction,
    postAction
  } from "@/utils/request.js";
  import {
    handleClickRouter,
    navigatorTo
  } from "@/utils/util.js";
  export default {
    data() {
      return {
        fDzbm: "",
        type: 0, // (0,全查，1.查询已录入，2.查询未录入
        likeName: "", // 检索条件

        fJlxxqmc: "", // 建筑名称
        collected: 0, // 已采集房屋
        notCollected: 0, // 未采集房屋

        dataSource: [],
        pageBottom: false,
        baseImgUrl: this.$baseImgUrl,
        scrollTop: 0,
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
        buildTypeMap: {
          0: 'fzFDzbm', // 房间
          1: 'jzFDzbm' // 建筑物
        }
      };
    },
    onLoad(options) {
      this.fDzbm = options.fDzbm;
      this.scrollTop = 0;
      uni.removeStorageSync("scrollTop");

      this.pageConfig.pageNo = 1;
      this.dataSource = [];
      this.type = 0;
      this.getList();
      uni.$on('real_estate_add', () => {
        console.log('ooooooooo')
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.type = 0;
        this.getList();
      })
    },

    onUnload() {
      this.$off('real_estate_add')
    },
    onShow() {

    },

    methods: {
      handleClickRouter,
      navigatorTo,
      scrollHeight(e) {
        uni.setStorageSync("scrollTop", e.detail.scrollTop);
      },
      scrollBottom(e) {
        let current = (this.pageConfig.pageNo += 1);
        let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
        if (current <= pages) this.getList();
        else this.pageBottom = true;
      },

      input_change(e) {
        this.scrollTop = 0;
        uni.removeStorageSync("scrollTop");
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
      },

      tabClick(type) {
        this.type = type;
        this.scrollTop = 0;
        uni.removeStorageSync("scrollTop");
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
      },

      async getList() {
        let data = {
          fDzbm: this.fDzbm,
          type: this.type,
          likeName: this.likeName,
          pageNo: this.pageConfig.pageNo,
          pageSize: this.pageConfig.pageSize,
        };
        try {
          const {
            result
          } = await getAction(`/indeed/house/unitsRoomList`, data);
          this.fJlxxqmc = result.fJlxxqmc;
          this.collected = result.collected;
          this.notCollected = result.notCollected;
          this.dataSource = this.dataSource.concat(result.roomList || []);
          this.pageConfig.total = result.total;
        } catch (error) {
          console.log("error", error);
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  .container {
    height: 100%;
    padding: 16rpx 16rpx 0 16rpx;
    background: #f9f9f9;

    display: flex;
    flex-direction: column;

    .build-info {
      width: 718rpx;
      height: 216rpx;
      background: linear-gradient(89deg, #51b1ff 0%, #1790f2 100%);
      border-radius: 8rpx;
      padding: 26rpx 46rpx;
      position: relative;

      .house-icon {
        position: absolute;
        width: 150rpx;
        height: 140rpx;
        top: 42rpx;
        right: 40rpx;
      }

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .address-name {
        font-weight: bold;
        font-size: 30rpx;
        color: #ffffff;
      }

      .collected-house {
        font-weight: 500;
        font-size: 26rpx;
        color: #b8dfff;

        text {
          margin-left: 10rpx;
          font-size: 28rpx;
        }
      }
    }

    .list-content {
      flex: 1;
      min-height: 0;
      margin: 16rpx 0;
      background: #fff;
      border-radius: 8rpx;
      padding: 16rpx;
      display: flex;
      flex-direction: column;

      .tabs-wrap {
        display: flex;

        .tabs {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-around;

          height: 80rpx;
          background: #f4f5f7;
          border-radius: 8rpx;

          &:nth-of-type(2) {
            margin: 0 32rpx;
          }

          font-weight: 500;
          font-size: 26rpx;
          color: #aaaaaa;
        }

        .tab-active {
          background: #edf7ff;
          font-weight: bold;
          font-size: 26rpx;
          color: #000000;
        }
      }

      .search-wrap {
        margin: 20rpx 0;
      }

      .list-container {
        flex: 1;
        overflow: scroll;

        .list-item {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          padding: 0 20rpx;
          width: 674rpx;
          height: 96rpx;
          background: #eef7f7;
          border-radius: 8rpx;

          image {
            width: 37rpx;
            height: 36rpx;
          }

          .context {
            flex: 1;
            font-weight: bold;
            font-size: 32rpx;
            color: #000000;
            margin: 0 16rpx;
          }

          .btn-text {
            width: 120rpx;
            height: 48rpx;
            background: #effffd;
            border-radius: 28rpx;
            border: 1rpx solid #c7e8e4;
            font-weight: 500;
            font-size: 26rpx;
            color: #17b5a3;
            text-align: center;
            line-height: 48rpx;
          }
        }

        .list-item-active {
          background: #f6f2e0;

          .btn-text {
            background: #fffae8;
            border: 1rpx solid #f6eecb;
            font-weight: 500;
            font-size: 26rpx;
            color: #ecc117;
          }
        }

        .list-item-logout {
          background: #FBE6E5;

          .btn-text {
            background: #FEF0EF;
            border-radius: 28rpx 28rpx 28rpx 28rpx;
            border: 1rpx solid #EEAAA7;
            font-weight: 500;
            font-size: 26rpx;
            color: #E43D33;
          }
        }
      }
    }
  }
</style>